{% props name, image, url, description, tags, lazyload = true %}

<article class="DemoCard">

    <div class="DemoCard__media">
        <img class="DemoCard__image"
             src="{{ image }}"
             width="640"
             height="360"
             alt="{{ name }}"
                {% if lazyload %}
                    loading="lazy"
                {% endif %}
        >
    </div>

    <div class="DemoCard__content">
        <h4 class="DemoCard__title">
            <a href="{{ url }}" class="stretched-link">
                {{- name -}}
            </a>
        </h4>
        <p class="DemoCard__description">
            {{- description -}}
        </p>
        <p class="DemoCard__tags">
            {% for tag in tags %}
                <span class="Tag">{{ tag }}</span>
            {% endfor %}
        </p>
    </div>

</article>
